<template>
  <div>
    <van-nav-bar :title="list"  left-arrow @click-left="onClickLeft" class="barcolor"></van-nav-bar>
    <div class="top" >
        <div class="tops">
            <span>
                3
            <span>条评论</span>
            </span>
            <span>
                登录
            </span>
        </div>
     <input @click="change" class="inputs" type="text" v-model="text">
    </div>
    <div class="setop">
            <span class="hwtopl"></span>
            <span class="hwtop1">最新</span>
    </div>
    <div class="tocomment" v-for='(item, id) in comment' :key='id'>
        <div class="left">
            <span class="pic">
            </span>
        </div>
        <div class="bottom">
            <p class="user">
               {{item.name}}
            </p>
            <p class="usercomment">
                {{item.comment}}
            </p>
        </div>
       
    </div>
     <div class="last" @click="change">
        <p>
            <van-icon class="bi" name="edit" />
            我来说两句
        </p>
    </div>
    <div class="send" v-if='show'>
        <div class="gobuy" @click="returns">取消</div>
        <textarea v-model="texts" class="sendinput" type="text" placeholder="来说两句吧..." />
         <van-button @click="coms" type="primary" class="ocomment" :disabled='btn'>评论一下</van-button>
    </div>
   
  </div>
</template>

<script>
export default {
  data() {
    return {
     email:'',
     text:[],
     texts:'',
     show:false,
     user:'',
     btn:'',
     list:'',
     lists:'',
     listss:[],
     some:{},
     name:'',
     commentes:[],
     comment:[
        //  {pic:'#ff0',user:'123',comments:'我不知道呀'},
        //  {pic:'#ff0',user:'123',comments:'我不知道呀'},
        //  {pic:'#ff0',user:'123',comments:'我不知道呀'},
        //  {pic:'#ff0',user:'123',comments:'我不知道呀'}
     ]
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/Booklist");
      localStorage.removeItem("booker");
    },
    semail() {
      this.$router.push("/email");
      this.email = '@163.com'
      localStorage.setItem('email',this.email)
    },
    returns(){
      this.show=false
      this.comment=JSON.parse(localStorage.getItem('booker'))
      console.log(this.comment) 
    },
    change(){
      this.show=true
    },
    coms(){
      this.some={name:this.name,comment:this.texts}
      console.log( this.some)
      var book = JSON.parse(localStorage.getItem("booker")) || [];
        console.log(book)
        if (book.length == 0) {
          book.push(this.some);
          localStorage.setItem("booker", JSON.stringify(book));
        } else {
          book.push(this.some);
          localStorage.setItem("booker", JSON.stringify(book));
        }
        localStorage.setItem("booker", JSON.stringify(book));
        alert("评论成功");
      this.listss = localStorage.getItem("booker")
      console.log(this.listss)
      //  console.log(this.listss)
        this.$axios.post("/api/commentes", {main:this.listss,some:this.lists}).then((data) => {
        console.log(data);
        if (data.data.code == 200) {
          console.log('成功')
        } else {
          console.log('失败')
        }
      });
    }
  },
  mounted(){
     this.lists =JSON.parse(localStorage.getItem("bookbox")); 
     if(JSON.parse(this.lists.coments)==null){
       console.log(1)
     }else{
        localStorage.setItem('booker',JSON.stringify(JSON.parse(this.lists.coments).coments))
     }
     this.comment = JSON.parse(localStorage.getItem('booker')) 
     this.list =JSON.parse(localStorage.getItem("bookbox")).title;
     console.log(this.list)
     this.user = localStorage.getItem("key");
     if( this.user==null){
       console.log('1')
     }else{
        this.name = JSON.parse(localStorage.getItem("key")).username;
     }
     
     console.log(this.user==null)
     if(this.user==null){
       this.btn=true
     }else{
       this.btn=false
     }
  }
};
</script>

<style  scoped>
.imgs {
  height: 2rem;
  width: 100%;
  text-align: center;
  border-bottom: 1px solid rgba(175, 172, 172, 0.616);
}
.van-image >>> img {
  margin-top: 0.55rem;
  
}
.inputs{
    margin-top: .3rem;
    width: 100%;
    height: .6rem;
    
}
.top,.tocomment{
  height: 2rem;
  padding:0rem 1rem;
  margin: 0rem 0.2rem;
  text-align: center;
  background-color: #f8f8f8;
}

/* 最新 */
.setop {
  width: 100%;
  height: 1rem;
  line-height: 0.8rem;
  overflow: hidden;
}

.hwtopl {
  float: left;
  height: 0.5rem;
  width: 0.1rem;
  background-color: #60cfeb;
  margin-left: 0.2rem;
  margin-top: 0.1rem;
}

.hwtop1 {
  font-size: 0.5rem;
  font-weight: 600;
  float: left;
  margin-left: 0.3rem;
}

.hwtop2 {
  font-size: 0.1rem;
  float: right;
  margin-right: 0.3rem;
}
.hwtext {
  position: relative;
  top: 2rem;
}

.hotmtop {
  width: 100%;
  height: 3.5rem;
  display: flex;
  justify-content: space-around;
}

/*  */
.tocomment{
    background-color: #fff;
    border-bottom: none;
    height: 1.5rem;
}
.tocomment .bottom{
   float: left;
   height: 1.5rem;
   width: 6.3rem;
    text-align: left;
    border-bottom: 1px solid rgba(175, 172, 172, 0.616);
}
.tocomment .left{
    height:1rem;
    width: 1rem;
    border-radius: 50%;
    background-color: rgb(139, 211, 45);
    float: left;
    margin-right: .3rem;
    margin-top: .1rem;
}
.tops{
    padding-top:.2rem ;
    width: 100%;
    height: .5rem;
    display: flex;
    justify-content: space-bestween;
}
.user{
    margin-top: .1rem;
    font-size: .4rem;
    color: rgb(74, 102, 231);
}
.usercomment{
    margin-top:.2rem;
    font-size:.4rem;
}
.last{
    text-align: center;
    margin-top: 2rem;
    color: rgb(17, 0, 255);
    font-size: .4rem;
}
.bi{
    font-size: .4rem;
    transform: translate(0px,2px);
}
/* input */
.send{
    position: absolute;
    top: 1.25rem;
    width: 10rem;
    height: 16.5rem;
    background-color: #f8f8f8;
}
.gobuy{
    width: 2rem;
    height: 1rem;
    /* background-color: rgb(221, 31, 31); */
   border-radius: 50%;
   text-align: center;
   line-height: 1rem;
   float: right; 
   margin-right: .2rem;   
}
.sendinput{
  margin-top: .1rem;
  margin-left: 5%;
  width: 90%;
  height: 2.4rem;
}
.ocomment{
  float: right; 
  margin-right: 5%;
  border-radius: 10px; 
  height: 1rem;  
  margin-top: 1rem;
}
.barcolor {
  background-color: rgb(96, 207, 235);
  
}
.van-nav-bar>>>.van-ellipsis{
font-size: .35rem;
  color: #fff;
}
</style>